<template>
    <div class="history-hot">
        <div class="his-hot" v-show="isHistoryShow">
            <div class="hd">
                <h4>历史记录</h4>
                <van-icon name="delete-o" @click="delClick" />
            </div>

            <div class="bd">
                <van-tag
                    plain
                    type="primary"
                    text-color="#999"
                    v-for="(item, index) in historyKeywordList"
                    :key="index"
                    @click="tagClick(item)"
                    >{{ item }}</van-tag
                >
            </div>
        </div>
        <div class="his-hot">
            <div class="hd">
                <h4>热门搜索</h4>
            </div>
            <div class="bd">
                <van-tag
                    plain
                    text-color="#999"
                    type="primary"
                    :style="{ color: item.is_hot ? 'red' : '#999' }"
                    v-for="(item, index) in hotKeywordList"
                    :key="index"
                    @click="tagClick(item.keyword)"
                    >{{ item.keyword }}</van-tag
                >
            </div>
        </div>
    </div>
</template>

<script>
import { clearHistoryDataAPI } from "../../requset/api";
export default {
    props: ["historyKeywordList", "hotKeywordList"],
    data() {
        return {
            isHistoryShow: true,
        };
    },
    methods: {
        tagClick(val) {
            console.log(val);
            this.$emit("tagClick", val);
        },
        delClick() {
            console.log("删除了");
            clearHistoryDataAPI().then((res) => {
                console.log(res);
            });
            // 提示文字
            // this.$toast("删除成功");
            //提示框
            this.$toast.success("删除成功");
            setTimeout(() => {
                this.isHistoryShow = false;
            }, 500);
        },
    },
};
</script>
 
<style lang = "less" scoped>
.his-hot {
    background-color: #fff;
    padding: 0.1rem;
    margin-bottom: 0.2rem;
    .hd {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.1rem;
        font-size: 0.18rem;
    }
    .van-tag {
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
    }
}
</style>